<template>
  <div class="app-container">
    <div class="app-title">
      查询条件
    </div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">关键字:</label>
        <el-input
          v-model="createByOrTitleOrContent"
          placeholder="发布人,标题,内容"
          class="search-item"
        />
      </div>
      <div class="searchItem">
        <label for="">发布时间:</label>
        <el-date-picker
          v-model="dateTime"
          start-placeholder="发布时间"
          :range-separator="null"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
        />
      </div>
      <div class="searchItem">
        <el-button class="searchItembtn" type="primary" @click="search">
          {{ $t("common.search") }}
        </el-button>
        <el-button type="success" class="searchItembtn" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
        <el-button class="el-icon-folder-add searchItembtn" type="success" @click="add">
          发布新任务
        </el-button>
      </div>
    </div>
    <div class="app-title">
      公告列表
    </div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="username"
        :show-overflow-tooltip="true"
        align="center"
        type="index"
        min-width="120px"
      />
      <el-table-column
        label="发布时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.publishTime | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="标题"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布人"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createBy }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布状态"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0"> 未发布</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="success">
            已发布</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="danger">
            下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.createTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link class="el-icon-search" @click="view(row)">详情</el-link>
          <el-link
            v-if="row.status === 1 || row.status === 0"
            class="el-icon-delete"
            @click="deletes(row)"
          >下架</el-link>
          <el-link
            v-if="row.status === 0"
            class="el-icon-edit"
            @click="edit(row)"
          >编辑</el-link>
          <el-link
            v-has-no-permission="['user:view', 'user:update', 'user:delete']"
            class="no-perm"
          >
            {{ $t("tips.noPermission") }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
    <el-dialog title="详情" :visible.sync="lookDialogVisible" width="30%">
      <div class="content" style="overflow:hidden" v-html="viewContent" />
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      dateTime: '',
      createByOrTitleOrContent: '',
      viewContent: '',
      loading: false,
      lookDialogVisible: false,
      tableKey: 0,
      list: []
    }
  },
  created() {
    this.search()
  },
  methods: {
    async search(e) {
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      this.loading = true
      const { createByOrTitleOrContent, dateTime } = this
      let startTime = ''
      let endTime = ''
      if (dateTime) {
        startTime = dateTime[0] + ' 00:00'
        endTime = dateTime[1] + ' 23:59'
      }
      try {
        const result = await this.$post(
          '/web/notice/list',
          {
            queryRequest: {
              ...this.pagination
            },
            entity: { startTime, endTime, createByOrTitleOrContent }
          },
          'json'
        )
        if (result.data.code === '0') {
          this.loading = false
          this.list = result.data.data.rows
          this.total = result.data.data.total
        }
      } catch (error) {
        this.loading = false
      }
    },
    reset() {
      this.dateTime = ''
      this.createByOrTitleOrContent = ''
      this.search()
    },
    view(row) {
      this.lookDialogVisible = true
      this.viewContent = row.content
    },
    add() {
      this.$router.push({
        name: 'addNotice'
      })
    },
    edit(row) {
      this.$router.push({
        name: 'addNotice',
        query: {
          id: row.id
        }
      })
    },
    deletes({ id }) {
      this.$confirm('是否要下架该公告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$put(`/web/notice/updateStatus`, { entity: { id, status: 2 }}, 'json').then(
            (res) => {
              if (res.data.code === '0') {
                this.$message.success('下架成功')
                this.reset()
              } else {
                this.$message.error(res.data.message)
              }
            }
          )
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 800px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
